<template>
  <div class="login-container">
    <a-card class="login-card" :bordered="false">
      <template #title>
        <div class="login-title">
          <span class="title-icon"><UserOutlined /></span>
          用户登录
        </div>
      </template>
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 0 }"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          class="login-form"
      >
        <a-form-item
            name="userAccount"
            :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input
            v-model:value="formState.userAccount"
            size="large"
            placeholder="请输入账号"
          >
            <template #prefix><UserOutlined style="color: rgba(0,0,0,.25)" /></template>
          </a-input>
        </a-form-item>

        <a-form-item
            name="userPassword"
            :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password
            v-model:value="formState.userPassword"
            size="large"
            placeholder="请输入密码"
          >
            <template #prefix><LockOutlined style="color: rgba(0,0,0,.25)" /></template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" block size="large" :loading="loading">
            登录
          </a-button>
        </a-form-item>

        <div class="form-footer">
          <a-button type="link" @click="router.push('/user/register')">
            没有账号？立即注册
          </a-button>
        </div>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import {userLogin} from "@/api/userController.ts";
import {message} from "ant-design-vue";
import {useUserStore} from "@/stores/user.ts";
import router from "@/router";
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';

const userStore = useUserStore()
const loading = ref(false)

const formState = reactive<API.UserLoginRequest>({
  userAccount: '',
  userPassword: '',
});
const onFinish = async (values: API.UserLoginRequest) => {
  loading.value = true
  try {
    const res = await userLogin(values)
    if (res.data.code === 0){
      message.success('登录成功')
      userStore.setLoginUser(res.data.data)
      router.push('/')
    }else {
      message.error('登录失败：' + res.data.message)
    }
  } catch (error) {
    message.error('登录请求失败，请稍后再试')
    console.error(error)
  } finally {
    loading.value = false
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.login-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}

.title-icon {
  margin-right: 12px;
  font-size: 28px;
}

.login-form {
  padding: 10px 0;
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>

